<!DOCTYPE html>
<html>
<head>
<title>Sample of getUsedValue</title>
<style>
div {
	margin: 10%;
	padding: 1em;
	border: 1px solid black;
}
.group {
	background:silver;
}
.orange-green {
	color: #ffA500;
	background: #008000;
}
.white-green {
	color: #fff;
	background: green;
}
.grey-green {
	color: grey;
	background: rgb(0, 128, 0);
}
.gray-green {
	color: gray;
	background: rgb(0%, 50%, 0%);
}
.info {
	color:InfoText;
	background:InfoBackground;
}
.window {
	color:WindowText;
	background:Window;
}
.button {
	color:ButtonText;
	background:ButtonFace;
}

#rgb1 { color: rgb(255,0,0) }       /* integer range 0 - 255 */
#rgb2 { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */
#rgb3 { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */
#rgb4 { color: rgb(110%, 0%, 0%) }  /* clipped to rgb(100%,0%,0%) */

#rgba1 { color: rgb(255,0,0) }      /* integer range 0 - 255 */
#rgba2 { color: rgba(255,0,0,1) }   /* the same, with explicit opacity of 1 */
#rgba3 { color: rgb(100%, 0%, 0%) }   /* float range 0.0% - 100.0% */
#rgba4 { color: rgba(100%,0%,0%,1) } /* the same, with explicit opacity of 1 */
#rgba5 { color: rgba(0,0,255,0.5) }        /* semi-transparent solid blue */
#rgba6 { color: rgba(100%, 50%, 0%, 0.2) } /* very transparent solid orange */
#rgba7 { color: rgba(0,0,255,0.5); background: rgba(0,255,0,0.5) }        /* semi-transparent solid blue */
#rgba8 { color: rgba(0,0,255,0.5); background: rgba(50%, 100%, 0%, 0.2) } /* very transparent solid orange */
#rgba9 { color: rgba(255,255,255,0.5); background: rgba(100%, 50%, 0%, 0) }

#hsl1 { background: hsl(0, 100%, 50%) }   /* red */
#hsl2 { background: hsl(120, 100%, 50%) } /* green */ 
#hsl6 { background: hsla(120, 100%, 50%, 1) }
#hsl3 { background: hsl(120, 100%, 25%) } /* dark green */ 
#hsl4 { background: hsl(120, 100%, 75%) } /* light green */ 
#hsl5 { background: hsl(120, 75%, 75%) }  /* pastel green, and so on */
#hsla1 { background: hsla(240, 100%, 50%, 0.5) } /* semi-transparent solid blue */
#hsla2 { background: hsla(30, 100%, 50%, 0.1) }  /* very transparent solid orange */

</style>
<script src="../getUsedValue.js"></script>
<script>
//alert(new Color('#fcf').to(null))
document.onclick = function (evt) {
	evt = evt || event
	var target = evt.target || evt.srcElement
	var fg = getUsedValue(target, 'color', 'rgbcolor')
	var bg = getUsedValue(target, 'background-color')
	alert(fg + ', ' + bg)
	//alert([fg.red, fg.green, fg.blue, fg.alpha])
	//alert([fg.red.getFloatValue(1), fg.green, fg.blue, fg.alpha])
}
</script>
</head>
<body>
<div class="group">
	<div class="orange-green">orange / green</div>
	<div class="white-green">white / green</div>
	<div class="grey-green">grey / green</div>
	<div class="gray-green">gray / green</div>
	
	<div id="rgb1">rgb(255,0,0)</div>
	<div id="rgb2">rgb(300,0,0)</div>
	<div id="rgb3">rgb(255,-10,0)</div>
	<div id="rgb4">rgb(110%, 0%, 0%)</div>
	<div id="rgba1">rgb(255,0,0)</div>
	<div id="rgba2">rgba(255,0,0,1)</div>
	<div id="rgba3">rgb(100%,0%,0%)</div>
	<div id="rgba4">rgba(100%,0%,0%,1)</div>
	<div id="rgba5">rgba(0,0,255,0.5)</div>
	<div id="rgba6">rgba(100%, 50%, 0%, 0.2)</div>
	<div id="rgba7">color: rgba(0,0,255,0.5); background: rgba(0,255,0,0.5)</div>
	<div style="color: rgb(0,0,255); background: rgb(0,255,0); opacity:0.5">color: rgb(0,0,255); background: rgb(0,255,0)</div>
	<div id="rgba8">{ color: rgba(0,0,255,0.5); background: rgba(50%, 100%, 0%, 0.2) }</div>
	<div id="rgba9">transparent</div>
	
	<div id="hsl1">red</div>
	<div id="hsl2">green</div>
	<div id="hsl6">green also</div>
	<div id="hsl3">dark green</div>
	<div id="hsl4">light green</div>
	<div id="hsl5">pastel green</div>
	<div id="hsla1">semi-transparent blue</div>
	<div id="hsla2">very transparent orange</div>
	
	<div class="info">info</div>
	<div style="color:#261080; background:#251080">info</div>
	<div class="window">window</div>
	<div class="button">button</div>
</div>
</body>
</html>